import { Button, Card, Space, Table, Popconfirm, message } from 'antd'
import React, { Component } from 'react'
import { listApi } from '../../../service/products'

export default class List extends Component {

    state = {
        total: 0,
        pages: 0,
        dataSource: [],
        columns: [
            {
                title: '序号',
                dataIndex: 'key',
                width: 65
            },
            {
                title: '姓名',
                dataIndex: 'name',
            },
            {
                title: '头像',
                dataIndex: 'avatar',
                render: (txt, record) => {
                    console.log('txt', txt)
                    console.log('record', record)
                    return record.avatar ? (<img src={record.avatar} style={{ width: '120px' }} />) : ("暂无图片")
                }
            },
            {
                title: '年龄',
                dataIndex: 'age',
            },
            {
                title: '住址',
                dataIndex: 'address',
            },
            {
                title: '操作',
                render: (record) => {
                    return <Space>
                        <Button size='small' type='primary' style={{ fontSize: '12px' }}
                            onClick={() => this.modifyOne(record)}>修改</Button>
                        <Popconfirm placement="top" title='确认删除这条数据吗？'
                            onConfirm={() => console.log('点击确认了')}
                            onCancel={() => console.log('点击取消了')} >
                            <Button size='small' type='primary' danger style={{ fontSize: '12px' }}>删除</Button>
                        </Popconfirm>
                    </Space>
                }
            },
        ]
    }

    componentDidMount() {
        this.loadData(1)
    }

    loadData = (page) => {
        listApi(page).then(res => {
            this.setState({ dataSource: res.list, total: res.total, pages: res.pages })
        }).catch(err => {
            message.info(err.message)
        })
    }

    modifyOne = (record) => {
        this.props.history.push(`/admin/products/edit/${record.key}`)
    }

    render() {
        return (
            <Card
                title='商品列表'
                extra={
                    <Button
                        type='primary'
                        size='small'
                        onClick={() => { this.props.history.push('/admin/products/edit') }}>
                        新增
                    </Button>
                }>
                <Table rowKey="key"
                    columns={this.state.columns}
                    dataSource={this.state.dataSource}
                    style={{ margin: '0' }}
                    pagination={{ defaultPageSize: 4, total: this.state.total, onChange: this.loadData }} />
            </Card>
        )
    }
}

